<template>
    <div class="caio">
                <div class="search">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="CAIO名称">
                            <el-input v-model="formInline.sender"></el-input>
                        </el-form-item>
                        <el-form-item label="CAIO型号">
                            <el-select class="input" v-model="formInline.region" placeholder="请选择关联项目">
                                <el-option label="开通" value="shanghai"></el-option>
                                <el-option label="关闭" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="CAIO地址">
                            <el-input v-model="formInline.sender"></el-input>
                        </el-form-item>
                        <el-form-item class="search_but">
                            <el-button style="background-color: #3768FA; color: white;" type="primary"
                                @click="onSubmit">查询</el-button>
                            <el-button style=" background-color: #3768FA1a; color: #3768FA; border:1px solid #3768FA;"
                                type="primary" @click="onSubmit">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="list">
                    <div class="list_feature">
                        <div class="new_tab">
                            <el-button-group>
                                <el-button type="primary">删除</el-button>
                            </el-button-group>
                            <el-button-group>
                                <el-button type="primary" @click="showChildDialog"
                                    style="background-color: #eaefff; color: #3768FA; border:1px solid #3768FA;"
                                    icon="el-icon-plus">新增</el-button>
                            </el-button-group>
                            <!-- <p class="parting"></p> -->
                            <!-- <el-button-group>
                                <el-button type="primary">导入数据</el-button>
                            </el-button-group>
                            <el-button-group>
                                <el-button type="primary" @click="drawerDialog">导出数据</el-button>
                            </el-button-group> -->
    
                        </div>
                        <p class="tab">表格设置 </p>
                    </div>
                    <div class="list_count">
                        <template>
                            <el-table :data="list" fit border style="width: 100%" height="100%">
                                <el-table-column prop="index" label="序号" width="180">
                                </el-table-column>
                                <el-table-column prop="name" label="CAIO名称" width="180">
                                </el-table-column>
                                <el-table-column prop="address" label="CAIO地址" width="180">
                                </el-table-column>
                                <el-table-column prop="type" label="CAIO类型" width="180">
                                </el-table-column>
                                <el-table-column prop="sort" label="设备排序" width="180">
                                </el-table-column>
                                <el-table-column prop="Ai" label="Ai数量" width="180">
                                </el-table-column>
                                <el-table-column prop="Ao" label="Ao数量" width="180">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="150">
                                    <template slot-scope="scope">
                                        <el-button style="color: #3768FA;" @click="handleClick(scope.row)" type="text"
                                            size="small">编辑</el-button>
                                        <el-button style="color: #F8544B;" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                    <div class="Pagination">
                        <template>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                                </el-pagination>
                            </div>
                        </template>
                    </div>
                </div>
                <!-- 新增 -->
                <Drawer ref="drawerComponent" :title="newTitle">
                    <el-form ref="form" :model="row_ov" label-width="80px">
                        <el-form-item label="CAIO名称">
                            <el-input v-model="row_ov.name"></el-input>
                        </el-form-item>
                        <el-form-item label="CAIO地址">
                            <el-input v-model="row_ov.address"></el-input>
                        </el-form-item>
                        <el-form-item label="CAIO类型">
                            <el-input v-model="row_ov.type"></el-input>
                        </el-form-item>
                        <el-form-item label="设备排序">
                            <el-input v-model="row_ov.sort"></el-input>
                        </el-form-item>
                        <el-form-item label="Ai数量">
                            <el-input v-model="row_ov.Ai"></el-input>
                        </el-form-item>
                        <el-form-item label="Ao数量">
                            <el-input v-model="row_ov.Ao"></el-input>
                        </el-form-item>
                    </el-form>
                </Drawer>
                <!-- 编辑弹窗 -->
                <Drawer ref="redact" :title="redactTitle">
                    <el-form ref="form" :model="row_ov" label-width="80px">
                        <el-form-item label="CAIO名称">
                            <el-input v-model="row_ov.name"></el-input>
                        </el-form-item>
                        <el-form-item label="CAIO地址">
                            <el-input v-model="row_ov.address"></el-input>
                        </el-form-item>
                        <el-form-item label="CAIO类型">
                            <el-input v-model="row_ov.type"></el-input>
                        </el-form-item>
                        <el-form-item label="设备排序">
                            <el-input v-model="row_ov.sort"></el-input>
                        </el-form-item>
                        <el-form-item label="Ai数量">
                            <el-input v-model="row_ov.Ai"></el-input>
                        </el-form-item>
                        <el-form-item label="Ao数量">
                            <el-input v-model="row_ov.Ao"></el-input>
                        </el-form-item>
                    </el-form>
                </Drawer>
    
                <!-- 导出数据 -->
                <Drawer ref="drawer" :title="drawerTitle">
                    <el-form ref="form" :model="form" label-width="80px">
                        <div class="drawer_count">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="按时间">
                                </el-radio>
                                <el-form-item label="活动时间">
                                    <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                            style="width: 100%;"></el-date-picker>
                                    </el-col>
                                    <el-col class="line" :span="2">-</el-col>
                                    <el-col :span="11">
                                        <el-time-picker placeholder="选择时间" v-model="form.date2"
                                            style="width: 100%;"></el-time-picker>
                                    </el-col>
                                </el-form-item>
                                <el-radio label="全部"></el-radio>
                            </el-radio-group>
                        </div>
                    </el-form>
                </Drawer>
            </div>
    </template>
    <script>
    import { caio } from '@/api/information'
    export default {
        name: "Caio",
        data() {
            return {
                formInline: {
                    userManage: '',
                    region: '',
                    date1: '',
                    date2: '',
                    phone: '',
                    sender: ''
                },
                form: {
                    region: '',
                    date1: '',
                    date2: '',
                },
                active: 0,
                row_ov: {},
                redactTitle: '编辑',
                drawerTitle: '导出数据',
                newTitle: '新增',
    
                list: null,
                listLoading: true,
                currentPage: 4,
    
                defaultProps: {},
                // 多选框
                checkAll: false,
                isIndeterminate: true
            };
        },
        created() {
            // 获取mock数据
            this.fetchData()
    
        },
        methods: {
            reset(tab, event) {
                console.log(tab, event);
            },
            handleClick(tab, event) {
                console.log(tab, event);
                this.row_ov = tab;
                if (this.row_ov.status == true) {
                    this.row_ov.status = '开启'
                } else {
                    this.row_ov.status = '关闭'
                }
                this.$refs.redact.openDrawer()
            },
            onSubmit() {
                console.log('submit!');
            },
            handleClicktab(row) {
                console.log(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleSwitchChange(row) {
                // 在这里可以处理开关状态的改变，可以将数据提交到后端保存等
                console.log('开关状态改变', row.activate_alarm);
            },
            // 处理mock数据
            fetchData() {
                this.listLoading = true
                caio().then(response => {
                    this.list = response.data.data.items
                    this.listLoading = false
                    // console.log(this.list)
    
                })
            },
            // 弹窗点击事件
            showChildDialog() {
                // 通过 ref 获取子组件实例并调用 openDrawer 方法
                this.$refs.drawerComponent.openDrawer();
            },
            // drawerDialog() {
            //     this.$refs.drawer.openDrawer();
            // },
        },
    };
    </script>
        
    <style lang="scss" scoped>
    .caio {
        width: 100%;
        height: calc(100vh - 130px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    
        .search{
            background-color: white;
            border-radius: 4px;
            margin-top: 15px;
    
            .el-steps {
                padding: 20px;
            }
    
            .el-form {
                // margin:  0;
                width: calc(100% - 40px);
                margin: 0 auto;
                padding: 10px 0;
                display: flex;
                flex-wrap: wrap;
    
                .el-form-item {
                    margin: 5px 30px 5px 0;
                }
    
                .search_but {
                    width: 200px;
                    margin-right: 0;
                    margin-left: auto;
                }
            }
        }
    
        .list {
            width: 100%;
            height: calc(100% - 100px);
    
            margin-top: 10px;
            background-color: white;
            border-radius: 4px;
            flex-grow: 1;
            margin-bottom: 15px;
    
            .list_feature {
                width: calc(100% - 30px);
                margin: 0 auto;
                height: 70px;
                display: flex;
                justify-content: space-between;
                align-items: center;
    
                .new_tab {
                    display: flex;
                    align-items: center;
    
                    .el-button-group {
                        margin-right: 10px;
                    }
    
                    .parting {
                        margin: 0 10px 0 0;
                        width: 1px;
                        height: 20px;
                        background-color: #dadada;
                    }
    
                    .el-button {
                        background-color: transparent;
                        color: #666;
                        border: 1px solid #DADADA;
                        border-radius: 4px;
                    }
    
                    .el-button:hover {
                        background-color: #3768FA1a;
                        color: #3768FA;
                        border: 1px solid #3768FA;
                        border-radius: 4px;
                    }
                }
    
                .tab {
                    color: #999;
                    cursor: pointer;
                    font-size: 14px;
                }
            }
    
            .list_count {
                width: calc(100% - 30px);
                height: calc(100% - 170px);
                margin: 0 auto;
                overflow: auto;
            }
    
            .Pagination {
                width: calc(100% - 30px);
                margin: 30px auto 0 auto;
    
                .block {
                    float: right;
                }
            }
        }
    
    }
    
    .drawer_count {
        .two_tlt {
            font-size: 14px;
        }
    
        .el-form-item {
            margin-top: 22px;
    
            .el-select {
                width: 100%;
            }
        }
    
    }
    </style>
          